<!--操作员设置-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>操作员设置</title>
    <link rel="stylesheet" href="../css/layui.css">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">MISS后台管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    username
                </a>
            </li>
            <li class="layui-nav-item"><a href="">注销</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item">
                    <a href="index.html">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">散客开单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Guests_check_in.html">宾客入住</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">订单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Order.html">所有订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">宾客结账</a>
                    <dl class="layui-nav-child">
                         <dd><a href="Ordinary_invoicing.html" >结账</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">预定管理</a>
                    <dl class="layui-nav-child">
                    	<dd><a href="Query_book.html">查询预定</a></dd>
                        <dd><a href="Add_a_reservation.html">添加预定</a></dd>
                        
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">营业查询</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Check-in_guest_enquiry.html">入住宾客查询</a></dd>
                        <dd><a href="Member_of_the_query.html">会员查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Data_management.html">数据管理</a></dd>
                        <dd><a href="VIP_set_up.html">VIP设置</a></dd>
                        <dd><a href="Billing_Settings.html">计费设置</a></dd>
                        <dd><a href="Set_up_the_room.html">房间设置</a></dd>
                        <dd><a href="Operator_setup.html" style="background-color: #1E90FF">操作员设置</a></dd>
                    </dl>
                </li>
                 <li class="layui-nav-item">
                    <a href="javascript:;">订单信息</a>
                    <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0);" onclick="tan()">查看订单信息</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="padding: 15px;">
        	<div class="layui-tab layui-tab-card" >
			  <ul class="layui-tab-title">
			    <li class="layui-this">添加管理员</li>
			    <li>管理管理员</li>
			  </ul>
        	<div id="ltc" class="layui-tab-content" style="height: 680px;">
			    <div class="layui-tab-item layui-show">
				    <form action="" id="addroot" method="post" class="layui-form">
				    	<div class="layui-form-item">
			    			<label class="layui-form-label">管理员名字</label>
						    <div class="layui-input-block yz1" >
						      <input id="inputname" type="text" name="name" required  lay-verify="required" placeholder="请输入管理员名字" autocomplete="off" class="layui-input">
						      <span id="trootname">名字不能为空</span>
						    </div>
			    		</div>
			    		<div class="layui-form-item">
			    			<label class="layui-form-label">管理员密码</label>
						    <div class="layui-input-block yz2">
						      <input id="inputpwd" type="password" name="password" required  lay-verify="required" placeholder="请输入数字或字母"  autocomplete="off" class="layui-input">
						      <span id="trootpwd">请输入正确的密码</span>
						    </div>
			    		</div>
			    		<div class="layui-form-item">
					     	<label class="layui-form-label">管理员角色</label>
						    <div class="layui-input-block">
						     <select name="role" lay-verify="required" name="type[id]">
						        <option value="">请选择</option>
						        <option value="1">前台管理员</option>
						        <option value="2">系统管理员</option>
						     </select>
						    </div> 
					     </div>
				    	<div class="layui-input-block">
					      <button class="layui-btn" type="button" lay-submit lay-filter="formDemo" onclick="add()">立即提交</button>
					      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
					    </div>
				    </form>
			 	</div>
			 	  <div class="layui-tab-item ">
				    <div class="t_content" style="height: 550px;">
				    	<table class="layui-table"  lay-even lay-skin="row" lay-size="lg">
					    	<thead>
					    		<tr>
					    			<th>管理员</th>
					    			<th>管理员级别</th>
					    			<th>操作</th>
					    		</tr>
					    	</thead>
					    	<tbody id="tbodyroot">
					    		<tr>
					    			<td>张辉</td>
					    			<td>前台管理员</td>
					    			<td><input class="layui-btn" type="button" value="修改信息" data-toggle="modal" data-target="#myModal"></input></td>
					    		</tr>
					    	</tbody>
				    	</table>
				    </div>
			 	</div>
			<!--    <div class="layui-tab-item">
			    	<div class="t_content" style="height: 550px;">
				    	<table class="layui-table"  lay-even lay-skin="row" lay-size="lg">
					    	<thead>
					    		<tr>
					    			<th>管理员</th>
					    			<th>所属酒店</th>
					    			<th>权限等级</th>
					    			<th>设置权限</th>
					    		</tr>
					    	</thead>
					    	<tbody>
					    		<tr>
					    			<td>张辉</td>
					    			<td>miss大酒店西门店</td>
					    			<td>前台管理员</td>
					    			<td><input class="layui-btn" type="button" value="修改权限" data-toggle="modal" data-target="#myModal1"></input></td>
					    		</tr>
					    		<tr>
					    			<td>张辉</td>
					    			<td>miss大酒店西门店</td>
					    			<td>前台管理员</td>
					    			<td><input class="layui-btn" type="button" value="修改权限" data-toggle="modal" data-target="#myModal1"></input></td>
					    		</tr>
					    		<tr>
					    			<td>张辉</td>
					    			<td>miss大酒店西门店</td>
					    			<td>前台管理员</td>
					    			<td><input class="layui-btn" type="button" value="修改权限" data-toggle="modal" data-target="#myModal1"></input></td>
					    		</tr>
					    	</tbody>
				    	</table>
				    </div>
			    </div>-->
			</div>
        </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © MISS酒店
    </div>
</div>


<div class="modal fade" id="webSocketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="height: 300px">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">订单信息</h4>
      </div>
      <div class="modal-body" style="height: 300px">
        <div class="form-group" style="float: left;"></br>
			 <textarea id="message_content" class="form-control" readonly="readonly" cols="80" rows="10"></textarea>
		</div>
       </div>
    </div>
  </div>
</div><!-- /.modal -->


 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="z-index: 1041;">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">修改管理员</h4>
      </div>
      <div class="modal-body">
        <form action="" enctype="multipart/form-data" method="post" role="form" class="form-horizontal"  id="changeroot" >
        	<div style="display: inline-block;width: 400px;" class="form-group">
	           	<div class="form-group">
	        		<label for="name" >&nbsp;&nbsp;&nbsp;&nbsp;管理员：</label>
	        		<input readonly="readonly" style="display: inline-block;width: 240px;" type="text" class="form-control"  placeholder="管理员：" id="rootName">
	    		</div>
	        		<input readonly="readonly" style="display: inline-block;width: 240px;" type="hidden" class="form-control" name="id"  placeholder="管理员：" id="changerootid">
	    		<div class="form-group">
	        		<label for="name" >权限等级：</label>
	        		<select id="selectrole" class="form-control" name="role" style="width: 240px;display: inline-block;">
					        <option value="">请选择</option>
					        <option value="1">前台管理员</option>
					        <option value='2'>系统管理员</option>
					    </select>
	    		</div>
	    		<div class="modal-footer">
			        <button type="button"  class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="button"  class="btn btn-primary" id="rootButton" onclick="change()">提交</button>
			       
		     </div>
        </form>
       </div>
    </div>
  </div>
</div><!-- /.modal -->



<style>
	.form-horizontal .form-group{
		margin-left: 0px;
	}
</style>

<script src="../js/layui.all.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../bt/modal.js"></script>
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>

<script>
function tan(){
	$("#webSocketModal").modal('show')
}
$(function(){
	$(".layui-form-item span").attr("style","color: red;")
	$(".layui-form-item span").hide();
	$(".yz1").mouseleave(function(){
		var test = $(this).children("input").val();
		if(test.length==0){
			$("#trootname").show()
		}else{
			$("#trootname").hide()
		}
	})
	$(".yz2").mouseleave(function(){
		var rpwd = /^[a-zA-Z0-9_-]{6,18}$/
		var test = $(this).children("input").val();
		if(rpwd.test(test)){
				$("#trootpwd").hide()
			}else{
				$("#trootpwd").show()
			}
		
	})
})
var rid;
function add(){
	var root = $("#addroot").serializeJSON();
	console.info(root)
	$.ajax({
		url:"/root",
		type:"post",
		data:JSON.stringify(root),
		dataType:'json',
		contentType:"application/json;charset=utf-8",
		success:function(mes){
			if(mes==1){
				alert("添加成功")
			}else{
				alert("添加失败")
			}
			$("#inputname").val("")
			$("#inputpwd").val("")
			show()
		}
	})
}

$(function(){
	$.ajax({
		url:"/root",
		type:"get",
		async:true,
		dataType:"json",
		success:function(mes){
			var str = "";
			 for (var i = 0; i < mes.length; i++) {
				str+="<tr><td>"+mes[i].name+"</td><td>"+mes[i].roleBean.role+"</td><td>"+
				"<button class='layui-btn' type='button' onclick='change()' data-toggle='modal' data-target='#myModal'><input type='hidden' value='"+mes[i].id+"' />修改信息</button><button class='layui-btn' onclick='dele("+mes[i].id+")' >删除管理员</button></td></tr>"
			} 
			$("#tbodyroot").html(str)
		}
	})
})

function show(){
	$.ajax({
		url:"/root",
		type:"get",
		async:true,
		dataType:"json",
		success:function(mes){
			var str = "";
			 for (var i = 0; i < mes.length; i++) {
				str+="<tr><td>"+mes[i].name+"</td><td>"+mes[i].roleBean.role+"</td><td>"+
				"<button type='button' class='layui-btn' onclick='change()' data-toggle='modal' data-target='#myModal'><input type='hidden' value='"+mes[i].id+"' />修改信息</button><button class='layui-btn' onclick='dele("+mes[i].id+")' >删除管理员</button></td></tr>"
			} 
			$("#tbodyroot").html(str)
		}
	})
}
function change(){
	var changevip = $("#changeroot").serializeJSON();
	$.ajax({
		url:"/root",
		type:"put",
		data:JSON.stringify(changevip),
		contentType:"application/json;charset=utf-8",
		success:function(mes){
			if(mes==1){
				alert("添加成功")
			}else{
				alert("添加失败")
			}
			$("#myModal").modal('hide');
			show();
		}
	})
}

function dele(rootid){
	$.ajax({
		url:"/root/delete/"+rootid,
		type:"delete",
		async:true,
		dataType:"json",
		success:function(mes){
			if(mes==1){
				alert("删除成功")
			}else{
				alert("删除失败")
			}
			show();
		}
	   
	})
}

$('#myModal').on('show.bs.modal', function (e) {
	 rid = $(e.relatedTarget).children("input").val();
	 $.ajax({
		 url:"/root/"+rid,
	 	type:"get",
	 	async:true,
	 	success:function(mes){
	 		console.info(mes)
	 		$("#rootName").val(mes.name)
	 		$("#changerootid").val(mes.id)
	 	}
	 }) 
	 $.ajax({
			type:"get",
			url:"/role",
			async:true,
			dataType:"json",
			success:function(message){
				console.info(message)
				var str = "<option value=''></option>";
				for (var i = 0; i < message.length-1; i++) {
					str+="<option value='"+message[i].id+"'>"+message[i].role+"</option>";
				}
				
				$("#selectrole").html(str);
			}
		})
	 
})
</script>
<script type="text/javascript">

var websocket = null;
//浏览器是否支持
if ('WebSocket' in window) {
  // 上面我们给webSocket定位的路径
  websocket = new WebSocket('ws://192.168.3.103:8080/webSocket');
} else {
  alert('该浏览器不支持websocket!');
}
//建立连接
websocket.onopen = function (event) {
  console.log('建立连接');
				
}
//关闭连接
websocket.onclose = function (event) {
  console.log('连接关闭');
}
//消息来的时候的事件
websocket.onmessage = function (event) {
  // 这里event.data就是我们从后台推送过来的消息
  console.log('收到消息:' + event.data);
  $('#message_content').append(event.data+'\n');
  // 在这里我们可以在页面中放置一个音乐，例如“您有新的订单了！”这样的提示音
  	document.getElementById("myAudio").play();
}

//发生错误时
websocket.onerror = function () {
  alert('websocket通信发生错误！');
}
//窗口关闭时，Websocket关闭
window.onbeforeunload = function () {
  websocket.close();
}

</script>
<audio src="../video/dingdong.mp3"  id="myAudio" ></audio>
</body>
</html>